<template>
	<view class="container">
		<view class="top-search">
			
			<input class="search-input"  v-model="idcard" type="idcard" placeholder="请输入身份证" />
			<button class="search-button" type="primary" @click="clickCard" size="mini">查询</button>
		</view>
		<view class="search-body" v-show="descShow">
			<text class="title">查询结果</text>
			<view :class="isCheck ? 'search-desc isCheck' : 'search-desc' " @click="clickStu">
				<span>{{student.studentName}}</span>
				<span>{{student.idCard}}</span>
			</view>
			<button type="primary" :disabled="! isCheck" :class="!isCheck ? 'bind-button disabled' : 'bind-button' "class="" @click="clickBind">绑定</button>
		</view>
		<show-modal></show-modal>
	</view>
</template>

<script>
		import { queryStudentByCard , } from '@/api/system/system'
		import {bindStudent } from '@/api/member/member'
	export default {
		data() {
			return {
				idcard:undefined,
				descShow:false,
				isCheck:false,
				disabled:false,
				student:{},
				bindFrom:{}
			}
		},
		methods: {
			clickCard(){
				if(this.idcard === undefined || this.idcard === ''){
					this.$modal.msgError("请输入身份证号")
				}else{
					this.$modal.loading("查询中，请稍后......")
					this.getStudentByCard()
				}
			},
			getStudentByCard(){
				queryStudentByCard(this.idcard).then(res => {
					this.$modal.closeLoading()
					if(res.data == null){
						this.$modal.msgError('未查询到该身份证，请确认是否有误')
						return
					}
					this.descShow = true
					this.student = res.data
				}).catch(()=>{
					this.$modal.msgError("查询失败")
				})
			},
			clickStu(){
				this.isCheck = ! this.isCheck
			},
			clickBind(){
				let that = this
				this.$showModal({
					title: '',
					icon:'/static/images/warning.png',
					content: '是否将该学生设为默认学生？',
					cancelText:"暂不设置",
					confirmText:"设置",
					message:false,
					success(res) {
						let status
						if (res.confirm) {
							status = 1
						} 
						else {
							status = 0
						}
						that.bindStudent(status)	
					}
				})
			},
			bindStudent(status){
				this.bindFrom ={
					memberId: uni.getStorageSync('userId'),
					status,
					studentId:this.student.id,
					type:0
				}
				bindStudent(this.bindFrom).then(res =>{
					if(status == 1){
						uni.setStorageSync('studentId', this.student.id)
					}
					let that = this
					this.$showModal({
						icon:'/static/images/success.png',
						content: '绑定成功',
						confirmText:"确定",
						message:true,
						success(res) {
							if (res.confirm) {
								that.$tab.navigateBack(`/pages/work/index`)
							}	
						}
					})
				}).catch(() =>{
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		width: calc(100vw - 60rpx);
		margin: 80rpx auto;
		border-radius: 20rpx;
	}
	.top-search{
		display: flex;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 68rpx 10rpx rgba(156,193,220,0.25);
		border-radius: 10rpx;
		.search-input{
			width: calc(100% - 140rpx);
			padding: 20rpx;
			height: 100rpx;
			
		}
		.search-button{
			width: 140rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: rgba(255,154,80,1);
			border-radius: 0px 5px 5px 0px;
		}
	}
	.search-body{
		width: 100%;
		height: 286px;
		margin-top: 100rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 34px 5px rgba(156,193,220,0.25);
		border-radius: 10rpx;
		padding-top: 40rpx;
		.title{
			display: block;
			font-size: 14px;
			font-weight: bold;
			color: #000000;
			padding-left: 40rpx;
		}
		.search-desc{
			width: 80%;
			height: 100rpx;
			margin: 60rpx auto;
			background: #E6E6E6;
			box-shadow: 0px 2px 34px 5px rgba(156,193,220,0.25);
			border-radius: 20rpx;
			opacity: 1;
			span{
				line-height: 100rpx;
				padding-left: 50rpx;
			}
		}
		.isCheck{
			border: 2px solid #FF9A50;
			background: #fff;
			box-shadow:none
		}
		.bind-button{
			width: 282px;
			height: 50px;
			background: rgba(255,154,80,1);
			box-shadow: 0px 2px 34px 5px rgba(156,193,220,0.25);
			border-radius: 20rpx;
			opacity: 1;
		}
		.disabled{
			background: rgba(255,154,80,0.5);
		}
	}
</style>